@charset "utf-8";
$color: #0078d7;
.container-fluid {
    .header {
        background-color: #222;
        nav {
            border: none;
            margin-bottom: 0;
        }
        .navbar-brand {
            padding: 7px 15px;
        }
    }
    .engine {
        padding: 105px 0 145px 0;
        background: url(../img/index/图层-9.jpg) no-repeat right 221px top 138px #fbfaf7;
        .engine_title {
            font-size: 48px;
            color: $color;
            font-weight: bold;
            line-height: 84px;
        }
        .engine_l_title {
            font-size: 30px;
            color: #666;
            line-height: 108px;
        }
        .engine_text {
            .engine_img {
                width: 64px;
                height: 64px;
                background-color: $color;
                border-radius: 5px;
                text-align: center;
                line-height: 64px;
                margin: 0 auto;
            }
            h3 {
                font-size: 19px;
                color: #333;
                line-height: 34px;
                margin: 0;
            }
            p {
                font-size: 14px;
                color: #666666;
                line-height: 25px;
            }
        }
    }
    .advantage {
        padding: 119px 0 105px 0;
        background: url(../img/index/图层-10.png) no-repeat left 216px top 190px;
        .advantage_title {
            font-size: 48px;
            color: #8fc31f;
            line-height: 93px;
        }
        .advantage_img {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background-color: #8FC31F;
            text-align: center;
            line-height: 54px;
        }
        p {
            font-size: 14px;
            color: #666;
            line-height: 54px;
        }
    }
    .family {
        padding: 115px 0 146px 0;
        background-color: $color;
        .family_title {
            font-size: 48px;
            color: #fffefe;
            text-align: center;
            line-height: 122px;
        }
        .family_card {
            min-height: 200px;
            .family_l_pic {
                text-align: center;
            }
            h3 {
                margin: 0;
                font-size: 33px;
                color: #FFFEFE;
                line-height: 48px;
            }
            p {
                font-size: 14px;
                color: #FFFEFE;
                line-height: 30px;
                margin: 0;
            }
        }
    }
    .game {
        padding: 86px 0 50px 0;
        .game_title {
            font-size: 34px;
            color: #2a2a2a;
            line-height: 89px;
        }
        .game_more {
            text-align: right;
            a {
                font-size: 14px;
                color: #2a2a2a;
                line-height: 89px;
            }
        }
        .game_b_card {
            a {
                display: inline-block;
                border-radius: 6px;
                overflow: hidden;
            }
        }
        .game_s_card {
            text-align: center;
            margin-bottom: 26px;
            padding: 0;
            a {
                display: block;
            }
            span {
                font-size: 14px;
                color: #2A2A2A;
                line-height: 28px;
            }
        }
    }
    .partner {
        background: #f4f4f4;
        padding-bottom: 44px;
        .partner_title {
            h3 {
                font-size: 30px;
                color: #2a2a2a;
                line-height: 102px;
                span {
                    font-size: 11px;
                    color: #777;
                }
            }
        }
        .partner_card {
            margin-bottom: 20px;
            a {
                display: inline-block;
                padding: 3px;
                border: 1px solid #ddd;
                border-radius: 5px;
                background-color: #fff;
            }
        }
    }
    .footer {
        background-color: #3b3b3b;
        padding: 35px 0 38px 0;
        position: relative;
        .footer_text {
            a {
                font-size: 14px;
                color: #a1a3ab;
                line-height: 28px;
            }
            .police {
                font-size: 12px;
                color: #a1a3ab;
                line-height: 27px;
            }
        }
        .footer_link {
            position: relative;
            .erweima {
                display: inline-block;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 5px;
                background-color: #FFFFFF;
                position: absolute;
                top: -157px;
                right: 24px;
                display: none;
                &:after {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-top: 10px solid #ffffff;
                    border-right: 9px solid transparent;
                    border-left: 9px solid transparent;
                    position: absolute;
                    top: 143px;
                    left: 68px;
                }
            }
            .mail {
                display: inline-block;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 5px;
                background-color: #FFFFFF;
                position: absolute;
                top: -85px;
                right: 90px;
                display: none;
                &:after {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-top: 10px solid #ffffff;
                    border-right: 9px solid transparent;
                    border-left: 9px solid transparent;
                    position: absolute;
                    top: 70px;
                    left: 68px;
                }
            }
            .qq {
                display: inline-block;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 5px;
                background-color: #FFFFFF;
                position: absolute;
                top: -65px;
                right: -41px;
                display: none;
                &:after {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-top: 10px solid #ffffff;
                    border-right: 9px solid transparent;
                    border-left: 9px solid transparent;
                    position: absolute;
                    top: 50px;
                    left: 68px;
                }
            }
            .mail_pic,
            .erweima_pic,
            .qq_pic {
                cursor: pointer;
            }
            .mail_pic:hover~.mail {
                display: block;
            }
            .erweima_pic:hover~.erweima {
                display: block;
            }
            .qq_pic:hover~.qq {
                display: block;
            }
        }
    }
}

@media screen and (min-width:768px) and (max-width:1199px) {
    .container-fluid {
        .header_content {
            a {
                padding: 15px 3%;
            }
        }
    }
}

@media screen and (max-width:991px) {
    .container-fluid {
        .engine {
            background: #fbfaf7;
        }
        .advantage {
            background: none;
        }
    }
}

@media screen and (max-width:768px) {
    .game {
        .game_b_card {
            text-align: center;
        }
    }
}

@media screen and (max-width:414px) {
    .container-fluid {
        .engine {
            .engine_title {
                font-size: 36px;
                text-align: center;
            }
            .engine_l_title {
                font-size: 20px;
            }
            .engine_text {
                h3 {
                    line-height: 20px;
                }
                p {
                    line-height: 20px;
                }
            }
        }
        .advantage {
            .advantage_title {
                text-align: center;
            }
        }
        .family {
            .family_title {
                font-size: 36px;
            }
        }
        .game {
            .game_title {
                font-size: 20px;
                line-height: 45px;
            }
            .game_more {
                a {
                    line-height: 45px;
                }
            }
        }
    }
}

@media screen and (min-width:319px) and (max-width:413px) {
    .container-fluid {
        .engine {
            .engine_l_title {
                line-height: 30px;
                text-align: center;
            }
        }
        .advantage {
            .advantage_title {
                font-size: 36px;
                text-align: center;
            }
            p {
                line-height: 30px;
            }
        }
        .family {
            .family_title {
                font-size: 36px;
                text-align: left;
            }
        }
        .game {
            .game_title {
                font-size: 18px;
            }
            .game_more_o {
                padding: 0 15px 0 0;
            }
        }
        .footer {
            .footer_text {
                a {
                    font-size: 12px;
                }
            }
            .police {
                font-size: 8px;
            }
        }
    }
}